<template>
    <div class="mobile-code-content">
        <div class="bg" :style="{backgroundImage:`url(${loginImg})`}"></div>
        <div class="mobile-code-box">
            <div class="mobile-title">
                {{ i18n('message.addUserByWxGzh', '注册用户') }}
            </div>
            <a-form ref="formRegister" :model="form" :rules="rules" id="formRegister"
                    @finish="onFinish"
                    @submit="handleSubmit">
                <a-form-item style="width: 100%" name="mobile" >
                    <a-input-group compact  size="large" style="display: flex;">
                        <a-select slot="addonBefore" defaultValue="+86">
                            <a-select-option value="+86">+86</a-select-option>
                            <a-select-option value="+87">+87</a-select-option>
                        </a-select>
                        <a-input :placeholder="i18n('message.mobileNumber','请输入手机号')"
                            v-model:value="form.mobile"
                            style="width: 100%;flex: 1"
                        >
                        </a-input>
                    </a-input-group>
                </a-form-item>
                <a-form-item name="captcha" style="width: 100%;">
                    <a-input-group compact  size="large" style="display: flex;">
                        <a-input style="flex: 1;"
                            class="rx-code-input"
                            :placeholder="i18n('message.code','验证码')"
                            v-model:value="form.captcha" allowClear
                        />
                        <a-button style="min-width: 112px" :disabled="state.smsSendBtn" @click.stop.prevent="getCaptcha">
                            {{!state.smsSendBtn && i18n('message.codeGet','获取验证码')||(state.time+' s')}}
                        </a-button>
                    </a-input-group>
                </a-form-item>


                <a-form-item  style="width: 100%;">
                    <a-button
                        size="large"
                        type="primary"
                        htmlType="submit"
                        class="register-button"
                        :loading="registerBtn"
                        :disabled="registerBtn"
                        style="width: 100%;"
                    >{{ $ti18('rxForm.okBtn', '确定') }}
                    </a-button>
                    <div style="text-align: right;margin-top: 10px;">
                        <router-link class="login" :to="{ name: 'login' }">
                            {{ i18n('form.account', '使用已有账户登录') }}
                        </router-link>
                    </div>
                </a-form-item>

            </a-form>
        </div>
    </div>

</template>

<script>
import LoginApi from "@/common/api/login.js";
import userUser from "../../stores/userUser";
import { mapActions } from 'pinia'
import {TokenUtil} from "@lowcode/jpaas-base-lib";
import loginImg from '@public/image/login/hert.png'
export default {
    name: 'mobileCodeLogin',
    components: {},
    data() {
        return {
            state: {
                time: 60,
                smsSendBtn: false,
            },
            registerBtn: false,
            form: {
                mobile:'',
                captcha:'',
            },
            ticketJson:{},
            loginImg,
            rules:{
                captcha:[
                    { required: true, message: this.i18n('message.code','验证码','input')},
                ],
                mobile:[
                    {required:true,message:this.i18n('message.mobileNumber','请输入手机号')},
                    {pattern:/^1[3-9]\d{9}$/,message:this.i18n('message.number','正确的手机号','input')}
                ]
            }
        }
    },
    computed: {},
    created(){
        this.ticketJson =  this.$route.query;
    },
    methods: {
        ...mapActions(userUser,['setToken']),
        i18n(name, text, key) {
            return this.$ti18(name, text, "viewsUser", key);
        },
        onFinish(){
            this.ticketJson.mobile=this.form.mobile;
            this.ticketJson.captcha=this.form.captcha;
            let self_ = this;
            LoginApi.addWxGzhUserAndLogin(this.ticketJson).then(res => {
                if(!res.success || !res.data || !res.data.access_token ){
                    self_.$message.error(res.message);
                    return;
                }
                let token = res.data.access_token;
                if(token){
                    TokenUtil.setToken(token);
                    self_.setToken(token);
                    self_.$router.push({name: 'appHome'}, () => {
                    });
                }
            }).catch(err => {
                self_.requestFailed(err)
            })
        },
        handleSubmit() {
            this.$refs['formRegister'].validateFields() ;
        },
        getCaptcha(e) {
            let self = this ;
            this.$refs['formRegister'].validateFields(['mobile']).then(res=>{
                this.state.smsSendBtn = true
                const interval = window.setInterval(() => {
                    if ( this.state.time-- <= 0) {
                        this.state.time = 60
                        this.state.smsSendBtn = false
                        window.clearInterval(interval)
                    }
                }, 1000)
                const hide = this.i18n('tips.sent', '验证码发送中..');
                LoginApi.getNewUserSmsCaptcha({mobile: this.form.mobile}).then(res => {
                    setTimeout(hide, 500);
                    if (res.code == 200) {
                        self.$notification['success']({
                            message: this.i18n('message.tips', '提示'),
                            description: this.i18n('message.successfully', '验证码发送成功'),
                            duration: 8
                        })
                    } else {
                        self.state.smsSendBtn = false
                    }
                }).catch(err => {
                    setTimeout(hide, 1)
                    clearInterval(interval)
                    self.state.time = 60
                    self.state.smsSendBtn = false
                    self.requestFailed(err)
                })
            }).catch(res=>{}) ;
        },
        requestFailed(err) {
            this.$notification['error']({
                message: this.$ti18('rxMsa.errorTip', '错误'),
                description: ((err.response || {}).data || {}).message || this.i18n('message.again', '错误，请稍后再试'),
                duration: 4
            })
            this.registerBtn = true
        }
    },

}
</script>
<style scoped>
.mobile-code-content{
    height: 100%;
    width: 100%;
    position: relative;
    background:linear-gradient(to left bottom, #409eff, #99aefd);
}
.mobile-code-box ::v-deep .ant-form-item{
    margin-bottom: 16px;
}
.mobile-title{
    text-align: center;
    padding: 10px 0 16px;
    font-size: 18px;
}
.mobile-code-box{
    z-index: 2;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10%;
    width: fit-content;
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
}
.bg{
    position: absolute;
    max-width: 43.2%;
    width: 100%;
    height: 0;
    padding-bottom: 36.54%;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    z-index: 1;
    background-size: contain;
}
.rx-code-input ::v-deep .ant-input-number-input{
    height: 36px;
}
</style>
